<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
	pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>
<link rel="stylesheet" type="text/css" href="includes/css/pivot.css">
<script type="text/javascript" src="includes/js/jquery/d3.v3.min.js"></script>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript" src="includes/js/jquery/jquery.min.js"></script>
<script type="text/javascript"
	src="includes/js/jquery/jquery-ui-1.9.2.custom.min.js"></script>
<script type="text/javascript" src="includes/js/jquery/pivot.js"></script>

<script type="text/javascript" src="includes/js/jquery/gchart_renderers.js"></script>
<script type="text/javascript" src="includes/js/jquery/d3_renderers.js"></script>



<!-- <script type="text/javascript" src="jquery.ui.touch-punch.min.js"></script> -->


</head>
<body>
	<script type="text/javascript">
		google.load("visualization", "1", {
			packages : [ "corechart", "charteditor" ]
		});
		$(function() {
			var derivers = $.pivotUtilities.derivers;

			$.getJSON("includes/js/data.json", function(mps) {
				$("#output").pivotUI(
						mps,
						{
							renderers : $.extend($.pivotUtilities.renderers,
									$.pivotUtilities.gchart_renderers,
									$.pivotUtilities.d3_renderers),
							derivedAttributes : {
								"Age Bin" : derivers.bin("Age", 10),
								"Gender Imbalance" : function(mp) {
									return mp["Gender"] == "Male" ? 1 : -1;
								}
							},
							cols : [ "Age Bin" ],
							rows : [ "Gender" ],
							rendererName : "Area Chart"
						});
			});
		});
	</script>

	<div id="output" style="margin: 30px;"></div>

</body>
</html>